<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品列表</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-image: url("https://files.codelife.cc/wallpaper/wallspic/166583.jpg?x-oss-process=image/resize,limit_0,m_fill,w_1920,h_1080/format,webp");
        background-size: cover;
      }
      html,
      body,
      #app {
        height: 100%;
        overflow: hidden;
      }
      .app_top {
        width: 98%;
        color: #fff;
        font-weight: 700;
        font-size: 20px;
      }
      .app_top input {
        background-color: #0000;
        border: 0;
        outline: none;
        color: #fff;
        font-size: 18px;
        border-bottom: 2px solid #fff;
        height: 36px;
        line-height: 36px;
      }
      .app_top {
        height: 100px;
        line-height: 100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border: 2px solid #fff;
        margin-top: 20px;
      }
      .app_middle {
        border: 2px solid #fff;
        width: 98%;
        margin: 20px auto;
        height: calc(100% - 180px);
      }
      .btn {
        width: 100px;
        color: #fff;
        height: 30px;
        border: 0;
        border-radius: 6px;
        background: linear-gradient(90deg, #1596fb, #002dff);
        cursor: pointer;
        font-family: "楷体";
        font-size: 18px;
      }
      .app_middle {
        padding: 20px;
        box-sizing: border-box;
        overflow: auto;
        position: relative;
      }
      .app_middle table {
        border-collapse: collapse;
        width: 100%;
        border: 2px solid #fff;
      }
      .app_middle table tr th {
        height: 40px;
        line-height: 40px;
        border: 2px solid #fff;
        background-color: #1596fb;
        color: #fff;
      }
      .app_middle table tr td {
        height: 50px;
        border: 2px solid #fff;
        text-align: center;
      }
      .app_middle table tr td img {
        margin-top: 10px;
      }
      .delete_btn {
        width: 60px;
        color: #fff;
        height: 30px;
        border: 0;
        border-radius: 6px;
        background: linear-gradient(90deg, #1596fb, #002dff);
        cursor: pointer;
        font-family: "楷体";
        font-size: 18px;
      }
      .add {
        color: #fff;
        text-align: center;
      }
      .btn_style{
        width: 30px;
        border: 0;
        height: 30px;
        border-radius: 4px;
        background: linear-gradient(90deg, #1596fb, #002dff);
        color:#fff;
        cursor: pointer;
      }
      .btn_text{
        width: 30px;
        display: inline-block;
       
      }
      .add{
          margin-top: 200px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="app_top">
        <div>
          <label for="number">编号:</label>
          <input type="text" v-model="number" />
        </div>
        <div>
          <label for="number">品牌名称:</label>
          <input type="text" v-model="brandname" />
        </div>
        <div>
          <label for="number">产品图片地址:</label>
          <input type="text" v-model="imgUrl" />
        </div>
        <div>
          <label for="number">价格:</label>
          <input type="text" v-model="price" />
        </div>
        <div>
          <button class="btn" @click="add">增加</button>
        </div>
      </div>
      <div class="app_middle">
         <div style="color:black;font-weight: 700;margin-bottom: 10px;">商品总价:{{total}}元</div>
        <table border="1">
          <tr>
            <th>全选:<input type="checkbox" :checked="allChecked" @change="allChecks" v-model="allChecked"/></th>
            <th>产品图片</th>
            <th>编号</th>
            <th>品牌名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item,index) of list" :key="item.id">
            <td><input type="checkbox" :value="item" v-model="checks"/></td>
            <td><img :src="item.imgUrl" alt="" width="50" /></td>
            <td>{{item.number}}</td>
            <td>{{item.brandname}}</td>
            <td style="color: red;">{{item.price}}</td>
            <td><button class="btn_style" @click="reduce(item)">-</button><span class="btn_text">{{item.count}}</span><button class="btn_style" @click="increase(item)">+</button></td>
            <td><button class="delete_btn" @click="del(index)">删除</button></td>
          </tr>
        </table>
        <div class="add" v-show="!list.length">暂时无数据</div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
      //商城列表
      let shoppingmalls = [
        {
          id: 1,
          imgUrl:
            "https://img1.baidu.com/it/u=2792494737,1983890664&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          brandname: "美特斯邦威",
          number: 1,
          price: 400,
          count: 10,
        },
        {
          id: 2,
          imgUrl:
            "https://safe-img.xhscdn.com/bw1/d1177eec-ab52-43f4-b27f-f947a603c9be?imageView2/2/w/1080/format/jpg",
          brandname: "香奈儿",
          number: 2,
          price: 20000,
          count: 2
        },
      ];
      //绑定check通过value、用v-model绑定一个数组
      //当check的lenght和list的length相等勾选上面的复选框

      //定义本地储存
      let local = {
        get(key) {
          return JSON.parse(localStorage.getItem(key));
        },
        set(key, value) {
          localStorage.setItem(key, JSON.stringify(value));
        },
      }
      const vm = new Vue({
        el: "#app",
        data: {
          number: "",
          brandname: "",
          imgUrl: "",
          price: "",
          //判断是否有本地存储
          list:local.get("list_shop") ?? shoppingmalls,
          checks:[],
          allChecked:false
        },
        watch: {
            checks(newVal){
                if(newVal.length === this.list.length){
                    this.allChecked = true
                }else{
                    this.allChecked= false
                }
            }
        },
        computed: {
            //监听这个属性的变化
            total(){
                let res  = this.checks.reduce((a,b)=>{
                     return a +=b.price*b.count
                },0);
                 return res.toFixed(2)
            }
        },
        methods: {
          add() {
            if (!this.number || !this.brandname || !this.price || isNaN(this.price)) {
                alert("请输入正确的值");
                return;
            };
            let obj = {
              id: Math.random().toString(32).substring(2),
              number: this.number,
              imgUrl: this.imgUrl ? this.imgUrl:"https://img.tuguaishou.com/ips_templ_preview/eb/97/52/lg_4456220_1627664430_6104302eacabc.jpg!w1024_w?auth_key=2288152006-0-0-a59502876ce313d748225d27cd3693d8",
              brandname: this.brandname,
              price: this.price,
              count: 1,
            };
            this.list.unshift(obj);
            //设置本地存储
            local.set("list_shop",this.list);
          },
          //删除函数
          del(i){
             let tatget = this.list.splice(i,1);
             //设置本地存储
            local.set("list_shop",this.list);
            //删除后total价格不消失的问题
            //判断删除的id和之前删除数组的id
            let a =[]
            this.checks.forEach((item)=>{
                if(item.id !== tatget[0].id){
                   a.push(item)
                }
            })
            this.checks = a;
            // this.checks = this.checks.filter(item => item.id !== tatget[0].id)
          },
          increase(item){
                item.count++
          },
          //减少函数
          reduce(item){
             if(item.count<=0){
               console.log("不能再减了");
               return;
             }
             item.count--
          },
          //全选change函数
          allChecks(){
                //双向绑定一下定义的值
                //当this.checks和this.list的length相等时算全选
                if(this.allChecked){
                    this.checks = this.list
                }else{
                    this.checks=[];
                }
          }
        },
      });
    </script>
  </body>
</html>
